<template>
    <view class="text-box" :style="'background-color:'+[item.style.bgColor?item.style.bgColor:'transparent']">
		<view :class="item.params.titlePosition=='center'?'text-info center':'text-info wlkflex align-start wrap justify-between'" :style="'border-bottom:'+item.style.border">
            <view>
                <view :style="[titleStyle]">{{item.params.title}}</view>
                <view class="mt10" :style="[descStyle]">{{item.params.desc}}</view>
            </view>
            <view class="more" :style="[moreStyle]" @click="jump(item.data.linkpath)">
                <view :class="item.params.titlePosition=='center'?'wlkflex justify-center':'wlkflex'">
                    <span v-if="item.params.moreType!='3'">{{item.params.moreTitle}}</span>
                    <span class="ml05">
                        <u-icon v-if="item.params.moreType!='2'" name="arrow-right" :color="item.style.moreColor" size="24rpx"></u-icon>
                    </span>
                </view>
            </view>
        </view>

	</view>
</template>

<script>
    import { toUrl } from '@/wlkutils/tools';
	export default {
		name:"wlk-text",
		data() {
			return {
				textStyle:{},
                titleStyle:{},
                descStyle:{},
                moreStyle:{},
			};
		},
        //属性
        props: {
            item: {
                type: Object,
                default: ()=> {
                    return []
                }
            }
        },
        created:function(e){
            this.setTextStyle();
        },
        methods: {
            setTextStyle(){
               this.titleStyle.fontSize = uni.$u.addUnit(this.item.style.titleSize, 'rpx');
               this.titleStyle.color = this.item.style.titleColor;
               this.titleStyle.fontWeight = this.item.style.titleWeight;
               this.descStyle.fontSize = uni.$u.addUnit(this.item.style.descSize, 'rpx');
               this.descStyle.color = this.item.style.descColor;
               this.descStyle.fontWeight = this.item.style.descWeight;
               this.moreStyle.color = this.item.style.moreColor;
               this.moreStyle.display = this.item.params.more=='hidden'?'none':'block';
               this.moreStyle.textAlign = this.item.params.titlePosition=='center'?'center':'right';
            },
            jump(path){
                toUrl(path);
            }
        }
	}
</script>

<style lang="scss" scoped>
    .text-box{
        padding: 0 32rpx;
        .text-info{
            padding: 32rpx 0;
            .more{
                font-size: $font-sm;
            }
        }
    }
</style>